<template>
    <div>
      <a-card title="个人资料展示页" :style="{textAlign: 'left'}">
        <a @click="$router.push({name: 'ProfileEdit'})" slot="extra">编辑个人资料</a>
        <img width="120" height="120" :src="avatar" alt="">
        <p>账号：{{name}}</p>
        <p>昵称：{{nickname}}</p>
        <p>邮件：{{email}}</p>
        <p>联系方式：{{phone}}</p>
        <p>年龄：{{age}}</p>
        <p>地址：{{address}}</p>
        <p>个人介绍：{{introduce}}</p>
        <p>性别：{{sex}}</p>
      </a-card>
    </div>
</template>

<script>
const client = new OSS.Wrapper({
  region: 'oss-cn-chengdu',//你的oss地址
  accessKeyId: 'LTAI4FpnfD6B5qyhS67J5Y4k',//你的ak
  accessKeySecret: 'gJ35cSU7oCiYlY9ZodRj7XeZhugANd',//你的secret
  //stsToken: ‘<Your securityToken(STS)>‘,//这里我暂时没用，注销掉
  bucket: 'icecream-test'//你的oss名字
});
export default {
  name: 'Profile',
  data () {
    return {
      name: '暂无',
      nickname: '暂无',
      avatar: '',
      email: '暂无',
      phone: '暂无',
      age: '暂无',
      address: '暂无',
      introduce: '暂无',
      sex: '暂无',
    }
  },
  created () {
    this.getProfileData(this.$store.getters.user_id);
  },
  methods: {
    getProfileData(id){
      this.$axios.post('/users/get_profile', {id}).then(res => {
        let data = res.data;
        if(data.ok){
          this.name = data.name;
          this.nickname = data.nickname;
          this.avatar = this.downLoadFromOss(data.avatar);
          this.email = data.email;
          this.phone = data.phone;
          this.age = data.age;
          this.address = data.address;
          this.introduce = data.introduce;
          this.sex = data.sex == 1 ? '男' : (data.sex == 2 ? '中性' : '女');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error('服务器出错，无法获取资料')
      })
    },
    downLoadFromOss(name){
      return client.signatureUrl(name)
    }
  },

}
</script>

<style scoped>

</style>
